import React from 'react';
import { Layout, Menu, Icon, Switch } from 'antd';
import styles from './Main.css'
import { Link } from 'dva/router';
const { Sider } = Layout;
const { SubMenu } = Menu;
let fatherPath = ''
export default class MainSideber extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            listMenu : []
        }
    }
    componentDidMount() {
        const { defaultSelectedKeys, menuClick, menuList } = this.props
        if (defaultSelectedKeys.length === 0) {
            let newArray = []
            newArray.push(menuList[0].id)
            menuClick({ keyPath: newArray })
        }
        let listMenu = this.traversalMenu(menuList)
        this.setState({listMenu:listMenu})
    }

    traversalMenu = menus => {
        return menus.map(Item => {
            let data;
            if (Item.children) {
                fatherPath = fatherPath + Item.path
                data = (<SubMenu
                    key={Item.id}
                    title={
                        <span>
                            <Icon type={Item.icon} />
                            <span>{Item.name}</span>
                        </span>
                    }>
                    {this.traversalMenu(Item.children)}
                </SubMenu>)
            } else {
                data = (<Menu.Item key={String(Item.id)}>
                    <Link to={fatherPath + Item.path}>
                        <Icon type={Item.icon} />
                        <span>{Item.name}</span>
                    </Link>
                </Menu.Item>)
            }
            return data
        })
    }

    sideberSwitch = () => {
        const { theme, collapsed, changeTheme } = this.props
        if (!collapsed) {
            return (
                <div className={styles.theme}>
                    <div style={theme === 'dark' ? { color: 'rgba(255, 255, 255, 0.65)' } : {}}><Icon type="bulb" style={{ marginRight: 5 }} />主题</div>
                    <div><Switch checkedChildren="深色" unCheckedChildren="浅色" onClick={e => changeTheme(e)} /></div>
                </div>
            )
        }
    }
    render() {
        const { theme, collapsed, menuClick, defaultSelectedKeys, defaultOpenKeys } = this.props
        const { listMenu } = this.state
        return (
            <Sider className={styles.sideber} trigger={null} collapsible collapsed={collapsed} theme={theme}>
                <div className={styles.mainLogo}>
                    <div className={styles.logo} />
                </div>
                <div className={styles.menuSideber}>
                    <Menu
                        theme={theme}
                        mode="inline"
                        onClick={menuClick}
                        defaultSelectedKeys={defaultSelectedKeys}
                        defaultOpenKeys={defaultOpenKeys}
                    >
                        {listMenu}
                    </Menu>
                </div>
                {
                    this.sideberSwitch()
                }
            </Sider>
        );
    }
}